import React from 'react';
import { connect } from 'dva';
import { Modal, Spin, Row, Col, Form } from 'antd';
import styles from '@/pages/search.less';

const formLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

@connect(
  state => ({
    loadingqueryAuditTaskInfo: state.loading.effects['taskMngt/queryAuditTaskInfo'],
    dataqueryAuditTaskInfo: state.taskMngt.dataqueryAuditTaskInfo,
  }),
  dispatch => ({
    queryAuditTaskInfo: e => dispatch({ type: 'taskMngt/queryAuditTaskInfo', payload: e }),
    savequeryAuditTaskInfo: e => dispatch({ type: 'taskMngt/savequeryAuditTaskInfo', payload: e }),
  })
)
export default class Detail extends React.Component {
  state = {
    modalVisible: false,
  };
  handleModalVisible = () => {
    if (this.props.disabled) return;
    if (!this.state.modalVisible)
      this.props.queryAuditTaskInfo({ executionPolicyId: this.props.executionPolicyId });
    if (this.state.modalVisible) this.props.savequeryAuditTaskInfo({});
    this.setState(() => ({ modalVisible: !this.state.modalVisible }));
  };

  render() {
    return (
      <>
        <Modal
          title="任务详情"
          visible={this.state.modalVisible}
          onCancel={this.handleModalVisible}
          onOk={() => this.handleModalVisible()}
          destroyOnClose
          maskClosable={false}
          okText="返回"
          cancelButtonProps={{ style: { display: 'none' } }}
          width={640}
          className={styles.viewMore}
        >
          <Spin spinning={Boolean(this.props.loadingqueryAuditTaskInfo)}>
            <Row>
              <Form>
                <Col md={24}>
                  <Form.Item label="任务名称" {...formLayout}>
                    {this.props.dataqueryAuditTaskInfo.executionPolicyName}
                  </Form.Item>
                </Col>
                <Col md={24}>
                  <Form.Item label="行数" {...formLayout}>
                    {this.props.dataqueryAuditTaskInfo.lineNumber}
                  </Form.Item>
                </Col>
                {/* <Col md={24}>
                  <Form.Item label="任务类型" {...formLayout}>
                    {
                      (
                        [
                          { executionPolicyType: 1, auditTaskTypeName: '全量/增量' },
                          { executionPolicyType: 2, auditTaskTypeName: '抽样' },
                        ].find(
                          item =>
                            item.executionPolicyType ==
                            this.props.dataqueryAuditTaskInfo.executionPolicyType
                        ) || {}
                      ).auditTaskTypeName
                    }
                  </Form.Item>
                </Col> */}
                <Col md={24}>
                  <Form.Item label="执行周期" {...formLayout}>
                    {(() => {
                      const executionDay =
                        {
                          4: `/${
                            ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][
                              this.props.dataqueryAuditTaskInfo.executionDay
                            ]
                          }`,
                          5: `/${this.props.dataqueryAuditTaskInfo.executionDay}号`,
                          6: `/第${this.props.dataqueryAuditTaskInfo.executionDay}天`,
                          7: `/每隔${this.props.dataqueryAuditTaskInfo.executionDay}天`,
                        }[this.props.dataqueryAuditTaskInfo.executionCycleTypeId] || '';
                      const executionTime =
                        this.props.dataqueryAuditTaskInfo.executionCycleTypeId != 1
                          ? `/${this.props.dataqueryAuditTaskInfo.executionTime}`
                          : '';
                      return (
                        (
                          [
                            {
                              cycleTypeId: 1,
                              cycleTypeCode: 'NOW_PERFORM',
                              cycleTypeName: '立即执行',
                            },
                            {
                              cycleTypeId: 2,
                              cycleTypeCode: 'TIMING_PERFORM',
                              cycleTypeName: '定时执行',
                            },
                            {
                              cycleTypeId: 4,
                              cycleTypeCode: 'WEEK_PERFORM',
                              cycleTypeName: '按周执行',
                            },
                            {
                              cycleTypeId: 5,
                              cycleTypeCode: 'MONTH_PERFORM',
                              cycleTypeName: '按月执行',
                            },
                            {
                              cycleTypeId: 7,
                              cycleTypeCode: 'PERIODIC_PERFORM',
                              cycleTypeName: '周期执行',
                            },
                          ].find(
                            item =>
                              item.cycleTypeId ==
                              this.props.dataqueryAuditTaskInfo.executionCycleTypeId
                          ) || {}
                        ).cycleTypeName +
                        executionDay +
                        executionTime
                      );
                    })()}
                  </Form.Item>
                </Col>
                <Col md={24}>
                  <Form.Item label="资源范围" {...formLayout}>
                    {(this.props.dataqueryAuditTaskInfo.taskDbGroupPos || [])
                      .map(item => item.dbName)
                      .join(',')}
                  </Form.Item>
                </Col>
                <Col md={24}>
                  <Form.Item label="任务状态" {...formLayout}>
                    {['启用', '停用'][this.props.dataqueryAuditTaskInfo.taskStatus] ||
                      this.props.dataqueryAuditTaskInfo.taskStatus}
                  </Form.Item>
                </Col>
              </Form>
            </Row>
          </Spin>
        </Modal>
        <span onClick={this.handleModalVisible}>{this.props.children}</span>
      </>
    );
  }
}
